<template>
	<view>
		<view class="user">
			<view class="list">
				<u-form-item :required="true" :leftIconStyle="{color: '#888', fontSize: '32rpx'}" label-width="120"
					label-position="top" label="真实姓名" prop="name">
					<u-input :border="border" placeholder="请输入姓名" v-model="model.name" type="text"></u-input>
				</u-form-item>
			</view>
			<view class="list">
				<u-form-item :required="true" :leftIconStyle="{color: '#888', fontSize: '32rpx'}" label-width="120"
					label-position="top" label="身份证号" prop="name">
					<u-input :border="border" placeholder="输入身份证号" v-model="model.name" type="text"></u-input>
				</u-form-item>
			</view>
		</view>
		<view class="content">
			<view class="title">
				上传身份证图片 <text>*</text>
			</view>
			<view class="list">
				<view class="left">
					<view class="name">
						人像面
					</view>
					<view class="text">
						上传身份证人像面
					</view>
				</view>
				<view class="right">
					<view class="image" @click="ohooseImage('face')">
						<image src="../../htmlA/static/identity3.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="list">
				<view class="left">
					<view class="name">
						国徽面
					</view>
					<view class="text">
						上传身份证国徽面
					</view>
				</view>
				<view class="right">
					<view class="image2" @click="ohooseImage('back')">
						<image src="../../htmlA/static/identity3.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="give">
				示例
			</view>
			<view style="text-align: center;">
				<image src="../../htmlA/static/identity4.png" class="give-img"></image>
			</view>
		</view>
		<view class="button">
			<u-button class="u-button">确认上传</u-button>
		</view>
	</view>
</template>

<script>
	var than;
	export default {
		data() {
			return {
				model: {}
			}
		},
		onLoad(option) {
			than = this;
		},
		methods: {
			ohooseImage(e) {
				var configure = "";
				if (e == 'face') {
					configure = "{'side':'face'}"
				} else {
					configure = "{'side':'back'}"
				}
				var that = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['original'],
					sourceType: ['album'],
					success: (res) => {
						const tempFilePaths = res.tempFilePaths;
						pathToBase64(tempFilePaths[0]).then(base64 => {
							let str = base64.substring(base64.indexOf(',') + 1)
							var json = {
								"image": str,
								"configure": configure
							};
							uni.request({
								url: 'https://dm-51.data.aliyun.com/rest/160601/ocr/ocr_idcard.json',
								dataType: 'json',
								header: {
									'Authorization': 'APPCODE bcdc5f3373f24a07866e061b3c3e8770'
								},
								method: 'POST',
								data: JSON.stringify(json),
								success(res) {
									console.log(res);
								},
							})
						}).catch(error => {
							console.error(error);
						})
					}
				})
			}
		}
	}
</script>

<style lang="less">
	page {
		background: #FAFAFA;
	}

	.user {
		margin: 0 36rpx 31rpx;
		border-radius: 20px;

		.list {
			background: #FFFFFF;
			padding: 0 24rpx;

		}
	}

	.button {
		padding: 30rpx 0;

		.u-button {
			width: 245rpx;
			height: 74rpx;
			background: #FB683D;
			border-radius: 20rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}
	}

	.content {
		margin: 0 36rpx;
		background: #FFFFFF;
		border-radius: 20rpx;

		.title {
			padding: 0 24rpx;
			height: 100rpx;
			display: flex;
			align-items: center;
			font-size: 32rpx;
			font-family: PingFang SC;
			color: #000000;

			text {
				margin: 15rpx 0 0 11rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FB683D;
			}
		}

		.list {
			margin: 0 auto 30rpx;
			background: #F4FBFD;
			width: 630rpx;
			height: 270rpx;
			border-radius: 10rpx;
			display: flex;
			padding-top: 31rpx;

			.left {
				padding-left: 24rpx;
				width: 275rpx;

				.name {
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: bold;
				}

				.text {
					padding-top: 36rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
				}
			}

			.right {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 328rpx;
				height: 209rpx;
				background: #FFFFFF;
				border-radius: 2rpx;

				.image {
					width: 202rpx;
					height: 125rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					background-image: url(../../htmlA/static/identity1.png);
					background-size: 100% 100%;

					image {
						width: 64rpx;
						height: 64rpx;
					}
				}

				.image2 {
					width: 202rpx;
					height: 125rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					background-image: url(../../htmlA/static/identity2.png);
					background-size: 100% 100%;

					image {
						width: 64rpx;
						height: 64rpx;
					}
				}
			}
		}

		.give {
			margin: 50rpx 0 15rpx;
			padding: 0 25rpx;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #000000;
		}

		.give-img {
			width: 655rpx;
			height: 170rpx;
			margin-bottom: 30rpx;
		}
	}
</style>
